<!-- 工作台 -->
<template>
  <div class="dashboard">
    <!-- 第一层 -->
    <div class="first">
      <div class="left">
        <div class="header"><p>机构概述</p></div>
        <div class="content">
          <div class="left-content">
            <div class="name">{{ organOverview.organName }}</div>
            <div class="address">地址: {{ organOverview.organAddress }}</div>
            <div class="duty-person">
              负责人: {{ organOverview.principal }} {{ organOverview.phone }}
            </div>
            <el-button
              style="width:200px"
              type="warning"
              @click="isShow = true"
            >查看营业部分布</el-button>
          </div>
          <div class="right-content">
            <div
              class="item"
              @click="skipTo('/branches/organization-manage')"
            >
              <div class="label">分拣中心(个)</div>
              <div class="num">
                <CountTo
                  :start-val="0"
                  :end-val="organOverview.sortingCenterNumber"
                  :duration="3000"
                ></CountTo>
              </div>
            </div>
            <div
              class="item"
              @click="skipTo('/branches/organization-manage')"
            >
              <div class="label">营业部(个)</div>
              <div class="num">
                <CountTo
                  :start-val="0"
                  :end-val="organOverview.agencyNumber"
                  :duration="3000"
                ></CountTo>
              </div>
            </div>
            <div
              class="item"
              @click="skipTo('/transit/driver')"
            >
              <div class="label">司机个数(个)</div>
              <div class="num">
                <CountTo
                  :start-val="0"
                  :end-val="organOverview.driverNumber"
                  :duration="3000"
                ></CountTo>
              </div>
            </div>
            <div
              class="item"
              @click="skipTo('/branches/operational-range')"
            >
              <div class="label">快递员人数(个)</div>
              <div class="num">
                <CountTo
                  :start-val="0"
                  :end-val="organOverview.courierNumber"
                  :duration="3000"
                ></CountTo>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <p>今日数据</p>
          <div class="refresh-box">
            {{ presentTime }}
          </div>
        </div>
        <div class="row-big">
          <div class="col">
            <div class="label">订单金额(元)</div>
            <div class="num">
              <CountTo
                :start-val="0"
                :end-val="todayData.orderAmount"
                :duration="3000"
              ></CountTo>
            </div>
            <div class="bottom">较昨日 +{{ todayData.orderAmountChanges }}</div>
          </div>
          <div class="col">
            <div class="label">订单数量(笔)</div>
            <div class="num">
              <CountTo
                :start-val="0"
                :end-val="todayData.orderNumber"
                :duration="3000"
              ></CountTo>
            </div>
            <div class="bottom">较昨日 +{{ todayData.orderNumberChanges }}</div>
          </div>
          <div class="col">
            <div class="label">运输任务(次)</div>
            <div class="num">
              <CountTo
                :start-val="0"
                :end-val="todayData.taskInDeliveryNumber"
                :duration="3000"
              ></CountTo>
            </div>
            <div class="bottom">
              较昨日 +{{ todayData.transportTaskNumberChanges }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二层 -->
    <div class="second">
      <div class="left">
        <div class="header">
          <p>
            待办任务
            <el-tooltip
              class="item"
              effect="light"
              placement="top"
              style="padding: 0; border:0px"
            >
              <template #content>
                <div>
                  待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件
                </div>
                <div>待派送率=待派送/(待派送+派送中+已签收+拒收)</div>
                <div>未分配率=未分配/全部数据</div>
                <div>超时率=超时任务/(已完成+进行中+已取消)</div>
              </template>
              <el-button>
                <img
                  style="width:20px; heigth: 20px"
                  src="../../assets/explain.png"
                />
              </el-button>
            </el-tooltip>
          </p>
          <div
            class="refresh-box"
            @click="refreshTime"
          >
            {{ presentTime }} - {{ twoDaysAfterTime }}
          </div>
        </div>
        <div class="chart">
          <WaterWaveLeft
            :waiting-pickup-rate="backlog.waitingPickupRate"
            :waiting-dispatch-rate="backlog.waitingDispatchRate"
            :unassigned-transport-task-rate="
              backlog.unassignedTransportTaskRate
            "
            :timeout-transport-task-rate="backlog.timeoutTransportTaskRate"
          ></WaterWaveLeft>
        </div>
        <div class="bottom-label">
          <div
            class="item"
            @click="skipTo('/business/order-manage?status=23000')"
          >
            <span class="label">代取件</span>
            <span class="num1">{{ backlog.waitingPickupNumber }}</span>
          </div>
          <div
            class="item"
            @click="skipTo('/business/order-manage?status=23007')"
          >
            <span class="label">待派件</span>
            <span class="num2">{{ backlog.waitingDispatchNumber }}</span>
          </div>
          <div
            class="item"
            @click="skipTo('/transport/transport-task?status=1')"
          >
            <span class="label">未分配运输</span>
            <span class="num3">{{
              backlog.unassignedTransportTaskNumber
            }}</span>
          </div>
          <div
            class="item"
            @click="skipTo('/transport/transport-task?status=5')"
          >
            <span class="label">超时运输</span>
            <span class="num4">{{ backlog.timeoutTransportTaskNumber }}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <p>
            执行中任务
            <el-tooltip
              class="item"
              effect="light"
              placement="top"
              style="padding: 0; border:0px"
            >
              <template #content>
                <div>
                  运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消)
                </div>
                <div>派送率=派送中/(待派送+派送中+已签收+拒收)</div>
              </template>
              <el-button>
                <img
                  style="width:20px; heigth: 20px"
                  src="../../assets/explain.png"
                />
              </el-button>
            </el-tooltip>
          </p>
          <div class="refresh-box">
            {{ presentTime }}
          </div>
        </div>
        <div class="chart">
          <WaterWaveRight
            :task-in-transit-rate="todayData.taskInTransitRate"
            :task-in-delivery-rate="todayData.taskInDeliveryRate"
          ></WaterWaveRight>
        </div>
        <div class="bottom-label">
          <div
            class="item"
            @click="skipTo('/business/order-manage?status=23005')"
          >
            <span class="label">运输中</span>
            <span class="num1">{{ todayData.taskInTransitNumber }}</span>
          </div>
          <div
            class="item"
            @click="skipTo('/business/order-manage?status=23008')"
          >
            <span class="label">派送中</span>
            <span class="num2">{{ todayData.taskInDeliveryNumber }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三层 -->
    <div class="third">
      <div class="common-function">
        <div class="header">
          <p>常用功能</p>
        </div>
        <div class="useFeaturelist">
          <div
            class="item"
            @click="skipTo('/branches/operational')"
          >
            <img
              src="../../assets/useFeature1.png"
              alt=""
            />
            <p>快递作业</p>
          </div>
          <div
            class="item"
            @click="skipTo('/transport/transport-task')"
          >
            <img
              src="../../assets/useFeature2.png"
              alt=""
            />
            <p>运输任务</p>
          </div>
          <div
            class="item"
            @click="skipTo('/transport/line-manage')"
          >
            <img
              src="../../assets/useFeature3.png"
              alt=""
            />
            <p>线路管理</p>
          </div>
          <div
            class="item"
            @click="skipTo('/transit/vehicle')"
          >
            <img
              src="../../assets/useFeature4.png"
              alt=""
            />
            <p>车辆管理</p>
          </div>
          <div
            class="item"
            @click="skipTo('/transit/driver')"
          >
            <img
              src="../../assets/useFeature5.png"
              alt=""
            />
            <p>司机管理</p>
          </div>
          <div
            class="item"
            @click="skipTo('/transit/freight-manage')"
          >
            <img
              src="../../assets/useFeature6.png"
              alt=""
            />
            <p>运费查询</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 四层 -->
    <div class="fourth">
      <!-- 线路管理 -->
      <div class="left">
        <div class="header">
          <p>线路管理</p>
        </div>
        <div class="table_body">
          <MyChineMap></MyChineMap>
        </div>
      </div>
      <!-- 运输任务 -->
      <div class="right">
        <div class="header">
          <p>运输任务</p>
          <router-link
            to="/transport/transport-task"
            class="search-more"
          >查看更多
          </router-link>
        </div>
        <div class="tabel_body">
          <TransportTable></TransportTable>
        </div>
      </div>
    </div>
    <!-- 五层 -->
    <div class="fifth">
      <!-- 订单总量 -->
      <div class="left">
        <div class="header">
          <p class="totalorders">订单总量</p>
          <div class="totalorderstime">2023-01 - 2023-06</div>
        </div>
        <div class="totalorderstype">
          单位: 笔
        </div>
        <div class="order-static">
          <div class="item">
            <div class="num">{{ orderLineChart.orderMaxNumber }}</div>
            <div class="label">订单最高值</div>
          </div>
          <div class="item">
            <div class="num">{{ orderLineChart.orderAverageNumber }}</div>
            <div class="label">订单平均值</div>
          </div>
          <div class="item">
            <div class="num">{{ orderLineChart.orderMinNumber }}</div>
            <div class="label">订单最低值</div>
          </div>
        </div>
        <div
          ref="orderOverview"
          class="chart"
        >
          <OrderChart
            :order-line-chart="orderLineChart"
          ></OrderChart>
        </div>
      </div>
      <!-- 订单分布 -->
      <div class="right">
        <div class="header">
          <p class="totalorders">订单分布</p>
          <div class="totalorderstime">2023-01 - 2023-06</div>
        </div>
        <div class="totalorderstype">
          单位: 笔
        </div>
        <div
          ref="orderDistribution"
          class="chart"
        >
          <CityOrderChart></CityOrderChart>
        </div>
      </div>
    </div>
    <DepartmentMap :is-show.sync="isShow"></DepartmentMap>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
import DepartmentMap from './components/DepartmentMap.vue'
import CityOrderChart from './components/CityOrderChart.vue'
import OrderChart from './components/OrderChart.vue'
import WaterWaveLeft from './components/WaterWaveLeft.vue'
import WaterWaveRight from './components/WaterWaveRight.vue'
import MyChineMap from './components/MyChinaMap/MyChinaMap.vue'
import TransportTable from './components/TransportTable.vue'
// import { useFeatureList, backlogListdata, taskingListData } from './static'
import { getWorkSpaceData } from '@/api/dashboard'
export default {
  name: 'Dashboard',
  components: {
    TransportTable,
    MyChineMap,
    WaterWaveRight,
    WaterWaveLeft,
    OrderChart,
    CityOrderChart,
    DepartmentMap,
    CountTo
  },
  data() {
    return {
      // 营业部分布弹窗显示隐藏
      isShow: false,
      // 根时间
      rootTime: null,
      // 代办事项
      backlog: {},
      // 组织概述
      organOverview: {},
      // 今日任务
      todayData: {},
      // 订单折线图数据
      orderLineChart: []
    }
  },
  computed: {
    // 实时时间
    presentTime() {
      return this.formatTime(this.rootTime)
    },
    // 两天后的时间
    twoDaysAfterTime() {
      return this.formatTime(this.getTwoDaysAfterTime(this.rootTime))
    },
    // 数据概述
    orderDataOverview() {
      const totalData = this.monthlyOrder.reduce((prev, item) => {
        return (prev += item)
      }, 0)
      // 平均值
      const averageData = (totalData / this.monthlyOrder.length).toFixed(0)
      // 最大值
      const maxData = Math.max(...this.monthlyOrder)
      // 最小值
      const minData = Math.min(...this.monthlyOrder)
      return [averageData, maxData, minData]
    }
  },
  created() {
    // 获取根时间
    this.rootTime = new Date()
    // 获取工作台数据
    this.getWorkSpaceData()
  },
  mounted() {
  },
  methods: {
    // 点击刷新时间
    refreshTime() {
      this.rootTime = new Date()
    },
    // 常用功能跳转页面
    skipTo(url) {
      this.$router.push(url)
    },
    // 获取某日两天后的时间
    getTwoDaysAfterTime(currentTime) {
      const time = currentTime
      time.setDate(time.getDate() + 2)
      return time
    },
    // 时间格式化
    formatTime(time) {
      return (
        time.getFullYear() +
        '-' +
        time.getMonth() +
        '-' +
        time.getDate() +
        ' ' +
        time.getHours() +
        ':' +
        time.getMinutes()
      )
    },
    // 获取工作台数据
    async getWorkSpaceData() {
      const { data } = await getWorkSpaceData()
      this.todayData = data.todayData
      this.organOverview = data.organOverview
      this.backlog = data.backlog
      this.orderLineChart = data.orderLineChart
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
